<!DOCTYPE HTML>
<html>

<head>
	<meta charset="utf-8">
	<meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
	<meta name="format-detection" content="telephone=no,email=no,date=no,aItemress=no">
	<title>修改地址</title>
	<link rel="stylesheet" type="text/css" href="../../css/aui.css" />
	<link rel="stylesheet" type="text/css" href="../../css/app.css" />
	<style type="text/css">
		.address-list {
			background-color: #FFFFFF;
			padding-right: 0.75rem;
			margin-bottom: 0.5rem;
		}

		.aui-input,
		input[type="text"],
		input[type="password"],
		input[type="search"],
		input[type="email"],
		input[type="tel"],
		input[type="url"],
		input[type="date"],
		input[type="datetime-local"],
		input[type="time"],
		input[type="number"],
		select,
		textarea {
			font-size: 0.75rem;
			/*color: #CCCCCC!important;*/
		}

		.aui-list .aui-list-item {
			min-height: 2.5rem;
		}

		.xiangxidizhi {
			min-height: 3.5rem!important;
		}

		.aui-list .aui-list-item-label {
			width: 6.6rem;
		}

		img {
			width: 1.5rem;
		}

		.aui-btn-block {
			display: inline-block;
			width: 17.25rem;
			height: 2rem;
			line-height: 2rem;
			color: #FFFFFF;
			/*background: linear-gradient(-152deg, #ff00ff, #9b00ff);*/
			/*background: linear-gradient(270deg, #ff00ff, #9471da);*/
			/*background: linear-gradient(270deg, #ee02fd, #9972e6);*/
			background: linear-gradient(135deg, rgba(132, 229, 255, 1) 0%, rgba(107, 180, 255, 1) 100%, rgba(122, 174, 229, 1) 100%);
			border-radius: 1.25rem;
			position: absolute;
			left: 50%;
			transform: translateX(-50%);
			font-size: .8rem;
			font-family: PingFangSC-Regular;
			font-weight: 400;
		}

		.btn-frame {
			margin-top: 2rem;
			position: relative;
		}

		.item-name {
			font-size: .75rem;
			font-family: PingFangSC-Regular;
			font-weight: 400;
			color: rgba(102, 102, 102, 1);
		}

		.item-info {
			font-size: .75rem;
			font-family: PingFangSC-Regular;
			font-weight: 400;
			color: rgba(34, 34, 34, 1);
		}
		/*改写*/

		.edit_address_wraper {
			padding: 0 0.75rem;
			background: #ffffff;
		}

		.edit_address_wraper>div {
			padding: 0.7rem 0 0.75rem 0;
			display: flex;
			align-items: center;
			border-bottom: 1px solid rgba(238, 238, 238, 0.5);
		}

		.edit_address_wraper>div span {
			display: inline-block;
			width: 3rem;
			font-size: 0.75rem;
			font-family: PingFangSC-Regular;
			font-weight: 400;
			color: rgba(102, 102, 102, 1);
			line-height: 1.05rem;
			white-space: nowrap;
			margin-right: 1.25rem;
		}

		.edit_address_wraper>div input {
			font-size: 0.75rem;
			font-family: PingFangSC-Regular;
			font-weight: 400;
			color: rgba(34, 34, 34, 1);
			line-height: 1.05rem;
			height: auto;
		}

		.btn_save {
			width: 17.25rem;
			height: 2.3rem;
			line-height: 2.3rem;
			background: #005A93;
			border-radius: 0.3rem;
			font-size: 0.8rem;
			font-family: PingFangSC-Regular;
			font-weight: 400;
			color: rgba(255, 255, 255, 1);
			text-align: center;
			margin: 2rem auto;
			position: fixed;
			bottom:1.5rem;
			right:0;
			left:0;
			transition: all 0.1s ease-out;
		}
		.btn_save:active{
			color: #fff;
			background-color: rgba(0, 90, 147, 0.8);
		}

		.textareaBox{
			     background:rgba(250,250,250,0.4) !important;
                 border-radius:0.2rem;
                 border:1px solid rgba(204,204,204,0.4) !important;
			     height:3.5rem;padding:0.4rem;color:#2e2e2e;width:100%
		}
		.inputInfo{
			text-align: right;
			font-size:0.7rem;
			color:#2E2E2E;
		}
		.edit_address_wraper .title{
			color:#2E2E2E;
		}
		.edit_address_wraper img{
			width:1.25rem;height:1.25rem;float:right;
		}
	</style>
</head>

<body>
	<div class="" id="app" v-cloak="">
		<div class="edit_address_wraper">
			<!-- 收货人 -->
			<div class="">
				<span style="margin-right:2rem;font-size:0.75rem " class="title">收货人</span>
				<input v-model="username" type="text" placeholder="收货人姓名"  class="inputInfo">
			</div>
			<!-- 联系方式 -->
			<div class="">
				<span class="title">联系方式</span>
				<input v-model="mobile" type="tel" maxlength="11" placeholder="收货人手机号" class="inputInfo">
			</div>
			<!-- 所在地区 -->
			<div class="" tapmode onclick="select_address()">
				<span class="title">所在地区</span>
				<input v-model="address" readonly type="text" placeholder="请选择" class="inputInfo">
				<img src="../../image/icon/right_jt.png" alt="" srcset="">
			</div>
			<!-- 详细地址 -->
			<span style="margin-top:0.7rem; display: block;width:100%;color:#2E2E2E;" class="title">详细地址</span>
			<div class="" style="padding-bottom:0.75rem;margin-bottom:0.75rem;margin-top:-0.4rem">
				<textarea v-model="detailed_address" type="text" placeholder="街道、楼牌号等" class="textareaBox"></textarea>
			</div>
		</div>
		<div class="btn_save" tapmode tapmode @click="addAddress">
			保存
		</div>
		<!-- <div class="">
				<ul class="aui-list aui-list-noborder">
					<li class="aui-list-item">
						<div class="aui-list-item-inner">
							<div class="aui-list-item-title">
								设为默认地址
							</div>
							<div class="aui-list-item-title" tapmode @click="is_default=is_default=='0'?1:0">
								<img v-if="is_default=='0'" src="../../image/icon/icon-switch-off.png" / style="width: 1.7rem;">
								<img v-if="is_default=='1'" src="../../image/icon/icon-switch-on.png" / style="width: 1.7rem;">
							</div>
						</div>
					</li>
				</ul>

			</div> -->
		<!-- <div class="btn-frame" tapmode tapmode @click="addAddress">
				<div class="aui-btn aui-btn-block">
					保存
				</div>
			</div> -->
	</div>
</body>
<script type="text/javascript" src="../../script/api.js"></script>
<script type="text/javascript" src="../../script/vue.js"></script>
<script type="text/javascript" src="../../script/common.js"></script>
<script type="text/javascript" src="../../script/verify.js"></script>
<script type="text/javascript" src="../../script/aui-dialog.js"></script>
<script type="text/javascript" src="../../res/bluemark_3_city.js"></script>
<script>
	var vm = new Vue({
		el: "#app",
		data: {
			id: 0,
			username: '',
			mobile: '',
			province_id: 0,
			province_name: '',
			city_id: 0,
			city_name: '',
			area_id: 0,
			area_name: '',
			address: '',
			detailed_address: '请选择',
			is_default: 0,
			actives: [0, 0, 0]
		},
		methods: {
			get_list: function() {
				get_data('api/Address/addressDetail', {
					token: $api.getStorage('token'),
					id: vm.id,
				}, function(ret) {
					// alert(JSON.stringify(ret))
					if (ret.status) {
						vm.username = ret.data.username
						vm.mobile = ret.data.mobile
						vm.province_id = ret.data.province_id
						vm.province_name = ret.data.province_name
						vm.city_id = ret.data.city_id
						vm.city_name = ret.data.city_name
						vm.area_id = ret.data.area_id
						vm.area_name = ret.data.area_name
						vm.detailed_address = ret.data.detailed_address
						vm.is_default = ret.data.is_default
						vm.address = vm.province_name + vm.city_name + vm.area_name;
						cityData.forEach(function(el, index) {
							if (el.id == vm.province_id) {
								vm.actives[0] = index;
								el.sub.forEach(function(sub1, index1) {
									if (sub1.id == vm.city_id) {
										vm.actives[1] = index1;
										sub1.sub.forEach(function(sub2, index2) {
											if (sub2.id == vm.area_id) {
												vm.actives[2] = index2;
											}
										})
									}
								})
							}
						})
					}
				})
			},
			addAddress: function() {
				if (vm.mobile == '') {
					toast('手机号不能为空')
					return;
				}
				if (vm.mobile.length < 11 || vm.mobile.length > 11) {
					toast('手机号格式错误')
					return;
				}
				if (!isPoneAvailable(vm.mobile)) {
					toast('手机号格式错误')
					return;
				}
				get_data('api/Address/editAddress', {
					token: $api.getStorage('token'),
					id: vm.id,
					username: vm.username,
					mobile: vm.mobile,
					province_id: vm.province_id,
					province_name: vm.province_name,
					city_id: vm.city_id,
					city_name: vm.city_name,
					area_id: vm.area_id,
					area_name: vm.area_name,
					address: vm.address,
					detailed_address: vm.detailed_address,
					is_default: vm.is_default
				}, function(ret) {
					// alert(JSON.stringify(ret))
					// toast(ret.msg)

					if (ret.status) {
						send_event('address_change')
						delay_close()
					}
				})
			}
		}
	})
	apiready = function() {
		vm.id = $api.getStorage('addid')
		$api.rmStorage('addid')
		vm.get_list()
		add_event('close_add', function(ret) {
			var dialogBox = api.require('dialogBox');
			dialogBox.alert({
				texts: {
					title: '提示',
					content: '是否保存收货地址？',
					leftBtnTitle: '取消',
					rightBtnTitle: '确定'
				},
				styles: {
					bg: '#fff',
					w: 295,
					corner: 10,
					title: {
						marginT: 20,
						titleSize: 17,
						titleColor: '#444444'
					},
					content: {
						marginT: 18,
						marginB: 30,
						color: '#444444',
						size: 17
					},
					left: {
						marginB: 0,
						marginL: 0,
						w: 147.5,
						h: 55,
						corner: 10,
						// bg: 'widget://image/ico/ico_btn_left_bg.png',
						bg: "#fff",
						color: '#999999',
						size: 16
					},
					right: {
						marginB: 0,
						marginL: 0,
						w: 147.5,
						h: 55,
						corner: 10,
						bg: '#fff',
						color: '#005A93',
						size: 16
					},
					horizontalLine: {
						color: '#EEEEEE',
						height: 1
					},
					verticalLine: {
						color: '#EEEEEE', //（可选项）字符串类型；左右按钮中间竖线的颜色，支持rgb、rgba、#；默认：'rgba(245,245,245,0)'
						width: 1 //（可选项）数字类型；左右边按钮竖线的高度；默认：0
					}
				}
			}, function(ret) {
				if (ret.eventType == 'left') {
					var dialogBox = api.require('dialogBox');
					dialogBox.close({
						dialogName: 'alert'
					});
					close_win()
				} else if (ret.eventType == 'right') {

					vm.addAddress()

					var dialogBox = api.require('dialogBox');
					dialogBox.close({
						dialogName: 'alert'
					});
				}
			});
			// var dialog = new auiDialog();
			// dialog.alert({
			// 	title: "提示",
			// 	msg: '是否保存收货地址？',
			// 	buttons: ['取消', '确定']
			// }, function(ret) {
			// 	if(ret) {
			// 		if(ret.buttonIndex == '1') {
			// 			close_win()
			// 		}
			// 		if(ret.buttonIndex == '2') {
			// 			vm.addAddress()
			// 		}
			// 	}
			// })
		})
	};

	function select_address() {
		var UIActionSelector = api.require('UIActionSelector');
		UIActionSelector.open({
			datas: cityData,
			layout: {
				row: 5,
				col: 3,
				height: 30,
				size: 13,
				sizeActive: 15,
				rowSpacing: 5,
				colSpacing: 10,
				maskBg: 'rgba(0,0,0,0.2)',
				bg: '#fff',
				color: '#999',
				colorActive: '#333',
				colorSelected: '#333',
			},
			animation: true,
			cancel: {
				text: '取消',
				size: 18,
				w: 90,
				h: 43,
				bg: 'rgba(0,0,0,0)',
				bgActive: 'rgba(0,0,0,0)',
				color: '#999',
				colorActive: '#999'
			},
			ok: {
				text: '完成',
				size: 18,
				w: 90,
				h: 43,
				bg: 'rgba(0,0,0,0)',
				bgActive: 'rgba(0,0,0,0)',
				color: '#005A93',
				colorActive: '#005A93'
			},
			title: {
				text: '请选择地址',
				size: 12,
				h: 44,
				bg: '#fff',
				color: '#fff'
			},
			lineColor: '#E6E6E6',
			actives: vm.actives,
			fixedOn: api.frameName
		}, function(ret, err) {
			if (ret) {
				if (ret.eventType == 'ok') {
					vm.province_id = ret.selectedInfo[0].id
					vm.province_name = ret.selectedInfo[0].name
					vm.city_id = ret.selectedInfo[1].id
					vm.city_name = ret.selectedInfo[1].name
					vm.area_id = ret.selectedInfo[2].id
					vm.area_name = ret.selectedInfo[2].name
					vm.address = vm.province_name + vm.city_name + vm.area_name
				}
			} else {
				console.log(JSON.stringify(err));
			}
		});
	}
</script>

</html>
